<script lang="ts" setup>
import { onMounted, reactive } from "vue"
import { addCommas } from "@/utils/addCommas"
import { get } from "@/utils/api"

onMounted(async ()=>{
  // 正版授权数
  data[0].number = addCommas(await get("/api/authorization/count"))
  // 用户数
  data[1].number = addCommas(await get("/api/user/count"))
  // 应用数
  data[2].number = addCommas(await get("/api/program/count"))
  // 平台收入
  data[3].number = addCommas(await get("/api/order/count"), true)
})

const data = reactive([
  {
    title: "正版授权",
    number: "0",
    footer: "平台正版授权数量（个）",
    img: "2",
    class: "s_safe"
  },
  {
    title: "平台用户",
    number: "0",
    footer: "平台全部用户数量（位）",
    img: "2",
    class: "s_globe"
  },
  {
    title: "应用数量",
    number: "0",
    footer: "平台授权应用数量（个）",
    img: "2",
    class: "s_core"
  },
  {
    title: "平台收入",
    number: "0",
    footer: "平台总收入（元）",
    img: "2",
    class: "s_store"
  },
])


</script>

<template>
  <t-row :gutter="[0,20]" class="container">
    <t-col v-for="(item,index) in data" :key="index" :lg="3" :md="3" :sm="6" :xl="3" :xs="12">
      <t-card class="card">
        <t-row>
          <t-col :span="8">
            <div class="title">{{ item.title }}</div>
            <div class="number">{{ item.number }}</div>
          </t-col>
          <t-col :span="4">
            <i :class="item.class" class="spirit_icon"/>
          </t-col>
          <t-col :span="12">
            <div class="footer">
              {{ item.footer }}
            </div>
          </t-col>
        </t-row>
      </t-card>
    </t-col>
  </t-row>
</template>

<style lang="less" scoped>
@title-font-size: 14px;
@number-color: #409EFF;
@footer-color: #909399;
@border-color: var(--td-component-border);

.container {
  border: @border-color 1px solid;
  padding: 10px 0;
  margin: 10px 0;

  .card {
    margin: 0 10px;

    .title {
      font-size: @title-font-size;
      font-weight: bolder;
    }

    .number {
      padding: 10px 0;
      font-weight: bolder;
      font-size: @title-font-size;
      color: @number-color;
    }

    .footer {
      color: @footer-color;
    }
  }
}
</style>
